<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <img src="http://39.96.169.152:9000/test/王佳业.jpg" alt="车检系统" class="logo">
        <h2>车辆检测管理系统</h2>
      </div>
      <el-form 
        :model="form" 
        :rules="rules"
        ref="formRef"
        label-position="top" 
        class="login-form"
      >
        <el-form-item label="账号" prop="userName">
          <el-input 
            v-model="form.userName" 
            prefix-icon="User"
            placeholder="请输入账号"
            @keyup.enter="focusPassword"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="form.password" 
            prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            show-password
            ref="passwordInput"
            @keyup.enter="focusCaptcha"
          />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <div class="captcha-container">
            <el-input 
              v-model="form.captcha"
              placeholder="请输入验证码"
              @keyup.enter="handleSubmit"
              ref="captchaInput"
            >
              <template #prefix>
                <el-icon><Picture /></el-icon>
              </template>
            </el-input>
            <div class="captcha-img" @click="refreshCaptcha">
              <img :src="captchaUrl" alt="验证码">
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            class="submit-btn" 
            :loading="loading"
            @click="handleSubmit"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login-footer">
      <p>© 2025 车辆检测管理系统 版权所有</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { login, getCaptcha } from '@/api/login.js'
import { ElMessage } from 'element-plus'
import { User, Lock, Picture } from '@element-plus/icons-vue'
import router from '@/router/index.js'

const formRef = ref(null)
const passwordInput = ref(null)
const captchaInput = ref(null)
const loading = ref(false)
const captchaUrl = ref('')

const form = ref({
  userName: '',
  password: '',
  captcha: '',
  captchaKey: ''
})

const rules = {
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度应在 3 到 20 个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 20, message: '密码长度应在 6 到 20 个字符之间', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 4, message: '验证码长度应为 4 位', trigger: 'blur' }
  ]
}

// 获取验证码
const refreshCaptcha = async () => {
  try {
    const res = await getCaptcha()
    if (res.data.code === 200) {
      form.value.captchaKey = res.data.data.captchaKey
      // 确保base64图片数据正确显示
      captchaUrl.value = `data:image/png;base64,${res.data.data.captchaImage}`
      // 清空验证码输入框
      form.value.captcha = ''
    } else {
      ElMessage.error('获取验证码失败')
    }
  } catch (error) {
    console.error('获取验证码错误:', error)
    ElMessage.error('获取验证码失败')
  }
}

// 输入框焦点控制
const focusPassword = () => {
  passwordInput.value.$el.querySelector('input').focus()
}

const focusCaptcha = () => {
  captchaInput.value.$el.querySelector('input').focus()
}

// 提交表单
const handleSubmit = () => {
  if (loading.value) return
  
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const res = await login(form.value)
        if (res.data.code === 200) {
          ElMessage.success('登录成功')
          router.push('/main')
        } else {
          ElMessage.error(res.message || '登录失败')
          refreshCaptcha()
        }
      } catch (error) {
        ElMessage.error('系统错误，请稍后重试')
        refreshCaptcha()
      } finally {
        loading.value = false
      }
    }
  })
}

onMounted(() => {
  refreshCaptcha()
})
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #3498db 0%, #2ecc71 100%);
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('@/assets/bg-pattern.png') repeat;
  opacity: 0.1;
}

.login-box {
  width: 420px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  transform: translateY(0);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.login-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.login-header {
  text-align: center;
  margin-bottom: 36px;
  padding: 10px 0;
}

.login-header .logo {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  border-radius: 50%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.login-header .logo:hover {
  transform: rotate(15deg);
}

.login-header h2 {
  font-size: 28px;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.login-form :deep(.el-form-item) {
  margin-bottom: 28px;
}

.login-form :deep(.el-input) {
  height: 45px;
}

.login-form :deep(.el-input__wrapper) {
  background: rgba(241, 245, 249, 0.8);
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.3s ease;
}

.login-form :deep(.el-input__wrapper:hover) {
  background: rgba(241, 245, 249, 0.95);
}

.login-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #3498db !important;
}

.login-form :deep(.el-input__inner) {
  height: 45px;
  font-size: 15px;
}

.captcha-container {
  display: flex;
  gap: 16px;
}

.captcha-img {
  width: 130px;
  height: 45px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.captcha-img:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: scale(1.02);
}

.captcha-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.submit-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  background: linear-gradient(to right, #3498db, #2ecc71);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.login-footer {
  margin-top: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}
</style>